<template>
  <div
      class="advancedSearch-container"
      style="display: flex; align-items: center; flex-direction: column"
  >
      <!-- 不同排序的切换通过button实现不是通过tab，参考b站 -->
      <el-card shadow="hover" class="search-result-card">
        <span style="font-size: 18px; margin-left: 12px">审核文章</span>
        <el-divider/>

        <!--上面的筛选栏-->
        <el-form ref="form" inline :model="form" label-width="80px">
          <el-form-item label="时间">
            <el-date-picker
                v-model="form.dates"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="form.status" placeholder="请选择状态">
              <el-option label="待审核" value="1"></el-option>
              <el-option label="已发布" value="2"></el-option>
              <el-option label="已驳回" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
        <!--表单-->
        <el-table
            ref="singleTable"
            :data="tableData"
            highlight-current-row
            style="width: 100%;margin-left: 100px;height:700px"
           >
          <el-table-column
              type="index"
              width="80">
          </el-table-column>
          <el-table-column
              property="updateTime"
              label="日期"
              width="120"
              align="center">
          </el-table-column>

          <el-table-column
              property="title"
              label="标题"
              width="400"
              align="center">
          </el-table-column>

          <el-table-column prop="status" label="状态" width="180" align="center" >
                  <template slot-scope="scope">
                    <el-tag
                      v-if="scope.row.status === '1'"
                      effect="dark"
                      type="success"
                      size="small"
                    >
                      待审核
                    </el-tag>
                    <el-tag
                      v-if="scope.row.status === '2'"
                      effect="dark"
                      type="warning"
                      size="small"
                    >
                      已发布
                    </el-tag>
                    <el-tag
                      v-if="scope.row.status === '3'"
                      effect="dark"
                      type="danger"
                      size="small"
                    >
                      已驳回
                    </el-tag>
                  </template>
                </el-table-column>


          <el-table-column
              label="操作"
              width="180"
              align="center">
            <template slot-scope="scope">
              <el-button @click="handleEnterExactAudit(tableData[scope.$index].knowledgeId)" type="text" size="small">审核</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
            :page-size="pagesize"
            :pager-count="11"
            layout="prev, pager, next"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :total="1000">
        </el-pagination>
      </el-card>
  </div>


</template>

<script lang="ts">

import {Component, Vue} from "vue-property-decorator";
import { FindStatus, AuditKnowledge, FindKonwledgesByPage } from "@/apis/apis";
@Component({
  name: "audit",
})
export default class audit extends Vue{

  scope: any;

  form= {
    dates: [],
    status: "",
  }
  //id: number = 19;
  //每页的数据数量
  pagesize :number =10
  //当前页码
  currentPage :number =1

  tableData: any[] = [

  ];

  mounted(){
   this.restart();
  }

  //搜索按钮
  search():void{
    const [startTime = null, endTime = null] = this.form.dates;
    const rParams = {
      transactionTime:[    
      startTime,
      endTime],
      status: this.form.status,
      userId:this.$store.state.userId,
    };
    FindStatus(rParams,this.currentPage,this.pagesize).then((res:any) =>{

      this.tableData = res.data.data.list;
    }).catch((err) => {
      console.log(err);
    });

  }

//重置
  reset():void{
   this.form.dates = [];
   this.form.status = "";
   this.handleCurrentChange
  }
//审核具体界面  
  handleEnterExactAudit(id:number): void {
   let str : string = id.toString();
   // 调用接口
  // AuditKnowledge(id).then((res: any) =>{
    //console.log(res.data.data.ruleForm);
     
  // })
    const route = this.$router.resolve({
       //跳转到写审核列表页面
      path: "/ExactAudit",
      query: { KonwId :str},
    });
    // 打开新页面
    window.open(route.href, "_blank");
   // if (this.notifyInfo("/ExactAudit", "文章编写")) {
     // this.$router.push({ name: "ExactAudit" });
  //  }
  }

/*
  notifyInfo(link: string, words: string): Boolean {
    // console.log(this.$route);
    if (this.$route.path == link) {
      this.$notify({
        title: "提示",
        message: "您当前已经在" + words + "页面",
        type: "warning",
        offset: 50,
        duration: 3000,
      });
      return false;
    }
    return true;
  }
*/

//分页请求
  handleCurrentChange(val: number):void{
    this.currentPage = val;
    FindKonwledgesByPage(this.currentPage,this.pagesize,this.$store.state.userId).then((res:any)=>{
    this.tableData = res.data.list;
    }).catch((err) => {
      console.log(err);
    });
  }

  //页面初始请求数据
  restart():void{
   // FindKonwledgesByPageInit(this.currentPage,this.pagesize,this.id).then((res:any) => {
      //console.log(res.data.data.table)
     // this.tableData = res.data.data.table;
    //})

    FindKonwledgesByPage(this.currentPage,this.pagesize,this.$store.state.userId).then(
      (res:any)=>{
      this.tableData = res.data.list;
     }
   ).catch((err) =>{
      console.log(err);
   })
  }


}
</script>